<template>
  <view style="padding: 20rpx 32rpx;">
    <!--    <view class="top" @click="activityBtn(1)">
      <view class="top_T" style="align-items: center;">
        <view class="name" style="display: flex;align-items: center;">
          <image :src="list[0].name_image" style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" mode=""></image>
          <view class="">{{ list[0].name }}</view>
        </view>
        <view class="time">{{ list[0].activity_time }}</view>
      </view>
      <view class=""><image :src="list[0].image" style="height: 335rpx;width: 100%;" mode=""></image></view>
    </view> -->
    <view class="cent" v-for="(item, index) in list" :key="index" @click="activityBtn(index + 1, item.id)">
      <view class="top_T">
        <view class="name" style="display: flex;align-items: center;">
          <image :src="item.name_image" style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" mode=""></image>
          <view class="">{{ item.name }}</view>
        </view>
        <view class="time">{{ item.activity_time }}</view>
      </view>
      <view class="cen">
        <view class="" style="display: flex;align-items: center;">
          <image style="width: 104rpx;height: 42rpx;margin-right: 10rpx;" :src="item.des_image" mode=""></image>
          <!-- <view class="amount" style="margin-right: 24rpx;">满额减</view> -->
          <view class="manjian">{{ item.describe }}</view>
        </view>
        <image src="/static/lzl/icon-huodong-right@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
      </view>
      <view class=""><image :src="item.image" style="height: 335rpx;width: 100%;" mode=""></image></view>
    </view>
    <!-- 第三个 -->
    <!-- <view class="top" @click="activityBtn(3)">
      <view class="top_T">
        <view class="name" style="display: flex;align-items: center;">
          <image :src="list[2].name_image" style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" mode=""></image>
          <view class="">{{ list[2].name }}</view>
        </view>
        <view class="time">{{ list[2].activity_time }}</view>
      </view>
      <view class=""><image :src="list[2].image" style="height: 335rpx;width: 100%;" mode=""></image></view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  onShow() {
    this.init();
  },
  onShareAppMessage(res) {},
  methods: {
    async init() {
      let n = await this.$api.activity();
      this.list = n.data;
    },
    activityBtn(data, item) {
      console.log(data);
      if (data == 1) {
        uni.navigateTo({
          url: '/pages/activity/actList/actList?data=' + item
        });
      } else if (data == 2) {
        uni.navigateTo({
          url: '/pages/activity/reduction/reduction'
        });
      } else if (data == 3) {
        uni.navigateTo({
          url: '/pages/activity/buying/buying'
        });
      }
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.cent {
  margin-bottom: 50rpx;
  .censhoop {
    display: flex;

    justify-content: space-between;
    margin-top: 30rpx;
    .shoopBox {
      height: 490rpx;
      width: 332rpx;
      // background-color: pink;
    }
  }
  .cen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .amount {
      width: 104rpx;
      height: 42rpx;
      line-height: 42rpx;
      text-align: center;
      border: 2rpx solid #c3b27f;
      color: #c3b27f;
    }
    .manjian {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #0a0a09;
    }
  }
  .top_T {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    .name {
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #0a0a09;
    }
    .time {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #c3b27f;
    }
  }
}
.top {
  margin-top: 40rpx;
  margin-bottom: 30rpx;
  .top_T {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    .name {
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #0a0a09;
    }
    .time {
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #c3b27f;
    }
  }
}
</style>
